// 企业通讯录信息
<template>
  <div class="communication">
    <div class="install-title">
      <div>
        企业通讯录信息
      </div>
    </div>
    <div class="install-label">
      <div>
        <!--所有标签列表 -->
        <ul>
          <li class="labelLi" v-for="(item,index) in labelLists" :key="index">
            {{item.chnName}}
            <span class="deleteImg" v-show="item.canDelete" @click="deleteLabelClick(index)"></span>
          </li>
          <li class="inputLi">
            <div>
              <input type="text" v-model="addLabel" maxlength="10">
            </div>
            <div @click="addLabelClick">
              <!-- <img src="/static/img/添加标签.png" alt=""> -->
              <el-button type="primary" icon="el-icon-edit"></el-button>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="install-title">
      <div>
        个人详情页展示的字段
      </div>
    </div>
    <div class="install-main">
      <div>
        <div class="main-left">
          <!-- 选择标签列表 -->
          <ul>
            <li class="i-m-l-selectLi" v-for="(item,index) in selectLists" :key="index">
              <div :class="{canSelectImg:item.canModify==1,cannotSelectImg:item.canModify==0}">
                <img v-if="item.showState" src="/static/img/iconfont_xuanzhong@2x.png" alt="" @click="updateLabelClick(index,0)">
                <img v-else src="/static/img/iconfont_weixuan@2x.png" alt="" @click="updateLabelClick(index,1)">
              </div>
              <div>
                {{item.chnName}}
              </div>
            </li>
          </ul>
        </div>
        <div class="main-right">
          <div>
            <img src="/static/img/zhaopian.png" alt="">
          </div>
          <div class="i-m-r-imgList">
            <!-- 图像列表 -->
            <ul>
              <li class="imglistLi" v-for="(item,index) in imglists" :key="index" v-show="item.showState">
                  <div>
                    <div>{{item.chnName}}</div>
                    <div>XXX</div>
                  </div>
                  <div><img src="/static/img/xiangqing@2x.png" alt=""></div>                
              </li>
            </ul>
          </div>
          <div>
            <img src="/static/img/zhaopianxia.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      labelLists: [], // 所有标签列表
      selectLists: [], // 选择标签列表
      imglists: [], //图片展示列表
      addLabel: "", //添加标签的值
      addClickTrue: false
    };
  },
  filters: {},
  created: function() {
    var accessToken = sessionStorage.getItem("accessToken");
    if (accessToken) {
      this.createdFun();
    }
  },
  watch: {},
  methods: {
    createdFun() {
      var self = this;
      self.labelLists = [];
      self.selectLists = [];
      self.imglists = [];
      self
        .getapiorgbookgetLabels({
          companyId: sessionStorage.getItem("ORGID")
        })
        .then(data => {
          if (data.statusCode == 200) {
            if (data.data) {
              self.labelLists = data.data;
              self.selectLists = data.data;
              self.imglists = data.data;
            }
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.addClickTrue = false;
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    },
    // 正则
    validateFun() {
      var self = this;
      var regOne = /^[\s]*$/; //输入不能为空
      if (regOne.test(self.addLabel)) {
        self.$message({
          type: "info",
          message: "标签不能为空格，请输入正确的标签"
        });
        self.addClickTrue = true;
      } else {
        self.addClickTrue = false;
      }
      if (self.addClickTrue == true) {
        return false;
      }
    },
    //添加企业信息
    addLabelClick() {
      var self = this;
      if (self.validateFun() == false) {
        return false;
      } else {
        if (self.addClickTrue == false) {
          self.addClickTrue = true;
          if (self.addLabel == "") {
            self.$message({
              type: "info",
              message: "信息不能为空"
            });
            self.addClickTrue = false;
          } else {
            var labelArr = {
              chnName: self.addLabel,
              companyId: sessionStorage.getItem("ORGID")
            };
            self
              .getapiorgbookadd(JSON.stringify(labelArr))
              .then(data => {
                self.addClickTrue = false;
                if (data.statusCode == 200) {
                  if (data.data) {
                    self.labelLists.push(data.data);
                  }
                  // self.createdFun();
                  self.addLabel = "";
                } else {
                  self.$message({
                    type: "info",
                    message: data.statusMessage
                  });
                }
              })
              .catch(msg => {
                self.addClickTrue = false;
                self.$message({
                  type: "info",
                  message: "服务器异常"
                });
              });
          }
        }
      }
    },
    //修改企业信息
    updateLabelClick(index, canModifyState) {
      var self = this;
      var updateOrg = {
        id: self.selectLists[index].id,
        companyId: sessionStorage.getItem("ORGID"),
        showState: canModifyState
      };
      if (self.selectLists[index].canModify == 1) {
        self
          .getapiorgbookupdate(JSON.stringify(updateOrg))
          .then(data => {
            if (data.statusCode == 200) {
              self.selectLists[index].showState = canModifyState;
              // self.createdFun();
            } else {
              self.$message({
                type: "info",
                message: data.statusMessage
              });
            }
          })
          .catch(msg => {
            self.addClickTrue = false;
            self.$message({
              type: "info",
              message: "服务器异常"
            });
          });
      }
    },
    // 过滤时间
    timeSerachFun(val) {
      var standardTime = new Date(val);
      var y, m, d, h, f;
      y = standardTime.getFullYear();
      m = standardTime.getMonth() + 1;
      m = m > 9 ? m : "0" + m;
      d = standardTime.getDate();
      d = d > 9 ? d : "0" + d;
      h = standardTime.getHours();
      h = h > 9 ? h : "0" + h;
      f = standardTime.getMinutes();
      f = f > 9 ? f : "0" + f;
      return y + "-" + m + "-" + d;
    },
    //删除企业信息
    deleteLabelClick(index) {
      var self = this;
      // self.selectLists.forEach(function(ele, ind) {
      //   if (ele.id == self.labelLists[index].id) {
      //     self.selectLists.splice(ind, 1);
      //   }
      // });
      // self.imglists.forEach(function(ele, ind) {
      //   if (ele.id == self.labelLists[index].id) {
      //     self.imglists.splice(ind, 1);
      //   }
      // });
      // self.labelLists.splice(index, 1);
      self
        .getapiorgbookdelete({
          companyId: sessionStorage.getItem("ORGID"),
          labelId: self.selectLists[index].id
        })
        .then(data => {
          if (data.statusCode == 200) {
            self.labelLists.splice(index, 1);
            // self.createdFun();
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    },
    ...mapActions([
      "getapiorgbookgetLabels",
      "getapiorgbookadd",
      "getapiorgbookupdate",
      "getapiorgbookdelete"
    ])
  }
};
</script>
<style scoped>
.inputLi > div:nth-child(1) {
  width: 160px;
  height: 40px;
  border-radius: 5px;
}
.inputLi > div:nth-child(1) input {
  width: 150px;
  padding-left: 5px;
  height: 40px;
  border: 0px;
  font-size: 16px;
  border-radius: 5px;
}
.inputLi > div:nth-child(2) {
  width: 42px;
  height: 42px;
  overflow: hidden;
  cursor: pointer;
  /* background-color: rgb(35, 230, 175); */
  display: flex;
  align-items: center;
  justify-content: center;
}
.inputLi > div:nth-child(2) img {
  width: 100%;
  height: 100%;
}
.inputLi {
  border: 1px solid #38adff;
  margin-right: 25px;
  margin-top: 15px;
  height: 42px;
  border-radius: 5px;
  width: 200px;
  display: flex;
  justify-content: space-between;
}
.i-m-r-imgList ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.imglistLi {
  width: 270px;
  height: 50px;
  margin-left: 12px;
  color: #ccc;
  font-weight: bold;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
  border-top: 1px solid #eee;
}
.imglistLi > div:nth-child(1) {
  width: 150px;
}
.imglistLi > div:nth-child(1) > div:nth-child(1) {
  font-size: 4px;
}

.imglistLi > div:nth-child(1) > div:nth-child(2) {
  font-size: 8px;
  color: #111;
}

.imglistLi > div:nth-child(2) {
  width: 30px;
  height: 30px;
}

.imglistLi > div:nth-child(2) img {
  width: 7px;
}

.i-m-r-imgList {
  width: 270px;
}

.i-m-l-selectLi {
  display: flex;
  height: 25px;
  align-items: center;
  margin-top: 25px;
  margin-right: 15px;
}

.i-m-l-selectLi > div:nth-child(1) {
  width: 21px;
  height: 21px;
}

.canSelectImg {
  cursor: pointer;
}
.cannotSelectImg {
  cursor: not-allowed;
}

.i-m-l-selectLi > div:nth-child(2) {
  margin-left: 10px;
  padding-right: 15px;
}

.i-m-l-selectLi > div:nth-child(1) img {
  width: 21px;
  height: 21px;
}

.main-left {
  width: 500px;
}

.main-left ul {
  display: flex;
  flex-wrap: wrap;
}

.main-right > div {
  width: 100%;
}

.main-right > div img {
  width: 100%;
}

.main-right > div:nth-child(3) {
  width: 100%;
  margin-top: 24px;
}

.main-right {
  width: 270px;
  /* border: 1px solid #ccc; */
}

.install-main {
  min-height: 70px;
  width: 100%;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  margin-bottom: 45px;
}

.install-main > div {
  width: 91%;
  min-height: 440px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}

.labelLi {
  font-size: 16px;
  color: #38adff;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 8px;
  padding-bottom: 8px;
  border: 1px solid #38adff;
  border-radius: 5px;
  margin-right: 25px;
  cursor: default;
  margin-top: 15px;
  position: relative;
}
.deleteImg {
  position: absolute;
  background: url(/static/img/Group.png) no-repeat;
  background-size: 100%;
  top: -7px;
  right: -5px;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.install-label {
  margin-top: 25px;
  min-height: 40px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 45px;
}

.install-label > div ul {
  display: flex;
  flex-wrap: wrap;
}

.install-label > div {
  width: 91%;
  min-height: 40px;
}

.install-title {
  height: 80px;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.install-title > div {
  width: 91%;
  background-color: rgba(56, 173, 255, 0.2);
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #000;
  padding-left: 15px;
}

.communication {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 100%;
  min-height: 700px;
}
</style>